<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../Images/font/iconfont.css">
    <link rel="stylesheet" href="../css/list.css">
</head>

<body>
    <!-- 头部开始 -->
    <header class="mall-header">
        <div class="header-top">
            <div class="header-topbar">
                <div class="topbar-user">
                    <a href="../html/login.html">登录</a>
                    &nbsp;或 &nbsp;
                    <a href="../html/enroll.html">注册</a>
                    &nbsp;ANTA会员
                </div>
                <div class="topbar-cart">
                    <a href="javascript:;" class="iconfont icon-gouwuche">
                    </a>
                </div>
                <div class="topbar-service">
                    <a href="javascript:;" class="iconfont icon-erji"></a>
                </div>
                <div class="topbar-en">EN</div>
            </div>
        </div>
        <div class="header-nav">
            <div class="center">
                <div class="header-logo">
                    <div class="logo-inner">
                        <a href="../html/index.html"><img src="../Images/10005.svg" alt=""></a>
                    </div>
                </div>
            </div>
            <ul class="header-list">
                <li> <a href="javascript:;"><b>冬奥国旗款</b></a>
                </li>
                <li><a href="javascript:;"><b>男子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>运动鞋</li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>户外综训鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>外套夹克</li>
                                    <li>羽绒服/马甲</li>
                                    <li>短袖T恤</li>
                                    <li>长裤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜子</li>
                                </ul>
                                <ul>
                                    <li><b>运动项目</b></li>
                                    <li>跑步</li>
                                    <li>篮球</li>
                                    <li>综训</li>
                                    <li>生活</li>
                                    <li>健身</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>女子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>棉鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>羽绒服</li>
                                    <li>套头卫衣</li>
                                    <li>外套、夹克</li>
                                    <li>长裤</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童安踏</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li>新品上市</li>
                                    <li>男中大童</li>
                                    <li>女中大童</li>
                                    <li>男小童</li>
                                    <li>女小童</li>
                                    <li>婴童</li>
                                </ul>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>足球鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>羽绒服</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                    <li>长裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童</b></a>
                </li>
                <li><a href="javascript:;"><b>品牌文化</b>
                    </a></li>
                <li><a href="javascript:;"><b>观赏视频</b>
                    </a></li>
                <li><a href="javascript:;"><b>联系我们</b>
                    </a></li>
                <li class="nav-item last">
                    <div class="nav-search-box">
                        <a href="javascript:;" class="nav-search-btns"><img src="../Images/10007.svg" alt=""></a>
                        <input type="text" placeholder="搜索">
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- 中部开始 -->
    <div class="main-container">
        <div class="selector-box">
            <div class="selector-top">
                <span>筛选</span>
                <a href="javascript:;" class="selector-reset fw">重置</a>
            </div>
            <ul id="nav">
                <li>
                    <span>性别</span>
                    <ul class="subnav">
                        <li>男</li>
                        <li>女</li>
                    </ul>
                </li>
                <li>
                    <span>大类</span>
                    <ul class="subnav">
                        <li>鞋类</li>
                        <li>服装</li>
                    </ul>
                </li>
                <li>
                    <span>品类</span>
                    <ul class="subnav">
                        <li>运动背心</li>
                        <li>跑鞋</li>
                    </ul>
                </li>
                <li>
                    <span>尺码</span>
                    <ul class="subnav">
                        <li>35.5</li>
                        <li>36</li>
                        <li>36.5</li>
                        <li>37.5</li>
                        <li>38</li>
                        <li>38.5</li>
                        <li>39</li>
                        <li>40</li>
                        <li>40.5</li>
                        <li>41</li>
                        <li>42</li>
                        <li>42.5</li>
                        <li>43</li>
                        <li>44</li>
                        <li>44.5</li>
                        <li>45</li>
                        <li>XS</li>
                        <li>S</li>
                        <li>M</li>
                        <li>L</li>
                        <li>XL</li>
                        <li>2XL</li>
                        <li>3XL</li>
                        <li>4XL</li>
                        <li>5XL</li>
                    </ul>
                </li>
                <li>
                    <span>品牌</span>
                    <ul class="subnav">
                        <li>安踏</li>
                    </ul>
                </li>
                <li>
                    <span>季节</span>
                    <ul class="subnav">
                        <li>春节</li>
                        <li>夏节</li>
                        <li>秋节</li>
                    </ul>
                </li>
                <li>
                    <span>系列</span>
                    <ul class="subnav">
                        <li>综训系列</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="list-wrp">

            <div class="list-top-l">
                <div class="cate-title">所有商品
                    <span>(10)</span>
                </div>
            </div>

            <!---------------------------->
            <ul class="goods-list clearfix">
                <!-- <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10022.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/100035.jpg" alt=""></li>
                                <li><a href="javascript:"><img src="../Images/10034.jpg" alt=""></a></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li>

                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10037.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10035.jpg" alt=""></li>
                                <li><a href="javascript:"><img src="../Images/10037.jpg" alt=""></a></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10022.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10022.jpg" alt=""></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10052.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10052.jpg" alt=""></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10039.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10041.jpg" alt=""></li>
                                <li><a href="javascript:"><img src="../Images/10042.jpg" alt=""></a></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10043.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10045.jpg" alt=""></li>
                                <li><a href="javascript:"><img src="../Images/10043.jpg" alt=""></a></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10041.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10023.jpg" alt=""></li>
                                <li><a href="javascript:"><img src="../Images/10047.jpg" alt=""></a></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10042.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10023.jpg" alt=""></li>
                                <li><a href="javascript:"><img src="../Images/10048.jpg" alt=""></a></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="goods-item J_goods_item ">
                    <div class="goods-body">
                        <a href="javascript:;" class="goods-pic"><img src="../Images/10051.jpg" alt=""></a>
                        <a href="javascript:;" class="goods-name ellipsis">【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</a>
                        <div class="goods-thumbs">
                            <ul class="thumbs-list">
                                <li><a href="javascript:" a><img src="../Images/10051.jpg" alt=""></li>
                                <li><a href="javascript:"><img src="../Images/10049.jpg" alt=""></a></li>
                            </ul>
                            <a href="javascript:" class="goods-price">
                                <span>￥699.00</span>
                            </a>
                        </div>
                    </div>
                </li> -->
            </ul>
            <!---------------------------------->
            <div class="list-top-r">
                <div class="filter-order">
                    <a href="javascript:;" class="filter-order-btn dropdown-btn">新品排序</a>
                    <ul class="filter-order-list dropdown-menu active">
                        <li class="active"><a href="javascript:;">新品排序</a></li>
                        <li><a href="javascript:;">销量排序</a></li>
                        <li><a href="javascript:;">价格由低到高</a></li>
                        <li><a href="javascript:;">价格由高到低</a></li>
                    </ul>
                </div>
                <div class="list-pagination">
                    <div class="page-select">
                        <a href="javascript:;" class="page-select-btn dropdown-btn">1</a>
                        <ul class="page-select-list scroll dropdown-menu active">
                            <li class="active"><a href="javascript:;"></a>1</li>
                        </ul>
                    </div>
                    <span>/ 1 页</span>
                    <a href="javascript:;" class="
                        page-btn page-prev-btn"></a>
                    <a href="javascript:;" class="
                        page-btn page-next-btn"></a>
                </div>
            </div>
            <!-- ----------- -->
        </div>
        <div class="list-bottom fr">
            <div class="list-pagination">
                <div class="page-select">
                    <a href="javascript:;" class="page-select-btn dropdown-btn">1</a>
                    <ul class="page-select-list scroll dropdown-menu active">
                        <li class="active"><a href="javascript:;"></a>1</li>
                    </ul>
                </div>
                <span>/ 1 页</span>
                <a href="javascript:;" class="
                    page-btn page-prev-btn"></a>
                <a href="javascript:;" class="
                    page-btn page-next-btn"></a>
            </div>
        </div>

    </div>
    </div>
    <!-- 中部结束 -->
    <!-- 尾部开始 -->
    <div class="footer">
        <div class="footer-main">
            <div class="footer-center">
                <div class="main-logo">
                    <img src="../Images/10002.svg" alt="">
                </div>
                <div class="main-ft">
                    <div class="service-one">
                        <h4>
                            在线客服
                            <span><img src="../Images/10006.svg" alt=""></span>
                        </h4>
                        <h4>
                            在线资讯
                            <span>400-858-2020</span>
                        </h4>
                    </div>
                    <div class="service-two">
                        <img src="../Images/10003.jpg" alt="">
                    </div>
                </div>
                <div class="company">
                    <p>Copyright(C) 2012-2020 by www.ANTA.cn&nbsp;&nbsp;
                        &copy;安踏体育用品有限公司版权所有&nbsp;&nbsp;营业执照&nbsp;&nbsp;开户许可证&nbsp;&nbsp;个人信息保护政策</p>
                    <span>闽ICP备2021011550号-2nbsp;&nbsp;闽公网安备35020302033806号</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 侧边导航 -->
    <div class="web-cover"></div>
    <!-- 尾部结束 -->
    <!-- 尾部结束 -->
</body>

</html>
<script src="../Images/js/jquery.min.js"></script>
<script>
    $("#nav span").on("click", function () {
        $(this).parent().toggleClass("active").siblings("li").removeClass("active")
        $(this).next().slideToggle().parent().siblings("li").find("ul").slideUp()
    })

    $(".filter-order-btn").on("click", function () {
        console.log($(this));
        $(".dropdown-menu").toggle();
    })
    $(".page-select-btn").on("click", function () {
        console.log($(this));
        $(".page-select-list").toggle();
    })


    function showlist() {
        let str = ""
        $.get("../Images/php/getGoodsList.php", "001", function (data) {
            console.log(data);
            let arr = JSON.parse(data);
            $(arr).each(function (index, item) {
                str += `<li class="goods-item J_goods_item " goodsid="${$(item)[0].goodsId}  ">
    <div class="goods-body">
        <a href="javascript:;" class="goods-pic"><img src="${$(item)[0].goodsImg}" alt=""></a>
        <a href="javascript:;" class="goods-name ellipsis">${$(item)[0].goodsName}</a>
        <div class="goods-thumbs">
            
            <ul class="thumbs-list">
                <li><a href="javascript:" a><img src="../Images/10035.jpg" alt=""></li>
                <li><a href="javascript:"><img src="../Images/10037.jpg" alt=""></a></li>
            </ul>
            <a href="javascript:" class="goods-price">
                <span>￥${$(item)[0].goodsPrice}.00</span>
            </a>
        </div>
    </div>
</li>`
            })
            $(".goods-list").html(str)
            $(".goods-item").hover(function () {
                $(".thumbs-list").show();
                $(this).css("box-shadow", "0px 0px 4px 4px #bdbdbb")
            }, function () {
                $(".thumbs-list").hide();
                $(this).css("box-shadow", "0px 0px 0px 0px")
            })
        })
    }
    showlist()

    /* -----------------------获取元素id----------------------------- */
    $(".goods-list").on("click", "li", function (e) {
        let id = $(this).attr("goodsid") || $(this).parent().attr("goodsid")
        location.href = "../html/detail page.html?goodid=" + id;
    })

    /* -------------------渲染-------------------------------- */
    $(".web-cover").on("click", function () {
        $("html,body").animate({  // 让body和html回到顶部
            scrollTop: 0
        }, 800)
    })

</script>